<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid #FFFF00;
			}
			body{
				margin: 0;
				padding: 0;
			}
			#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #eeeeee;
			}
			
			#nav li {
				float: left;
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #333;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #dddddd;
				font-weight: 700;
				color: #222;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">Homepage</span></a>
					</li>


					<li>
						<a href="beijing.html"><span class="cn">个人简历</span><span class="en">个人简历</span></a>
					</li>
					<li>
						<a href="Baoposhizhong.html"><span class="cn">爆破时钟</span><span class="en">爆破时钟</span></a>
					</li>


					<li>
						<a href="free.html"><span class="cn">自由坠体</span><span class="en">自由坠体</span></a>
					</li>


					<li>
						<a href="huizhihuabu.html"><span class="cn">绘制画布</span><span class="en">绘制画布</span></a>
					</li>
					
					<li>
						<a href="manyballs.html"><span class="cn">缤纷小球</span><span class="en">缤纷小球</span></a>
					</li>
					
					<li>
						<a href="screen .html"><span class="cn">屏幕保护</span><span class="en">屏幕保护</span></a>
					</li>


					<li>
						<a href="TaiJi3.html"><span class="cn">运动太极</span><span class="en">运动太极</span></a>
					</li>
					
					<li>
						<a href="Tantiaoxiaoqiu.html"><span class="cn">弹跳小球</span><span class="en">弹跳小球</span></a>
					</li>
				</ul>
			</div>
		<canvas id = "myCanvas" width="1400" height="450"></canvas>
			<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			var rot = 0;
			var leftx = 250;
			var xuanzhuanjd = 5;
			var huchang = 5*Math.PI*200/180;
			var R = 200;
			
			setInterval(function(){
        		//ctx.clearRect(0,0,1400,450);
				ctx.beginPath();
				//ctx.fillStyle = "yellow";
				ctx.fillStyle = "rgba(255,255,0,0.2)";
				ctx.fillRect(0,0,1400,450);
				
				ctx.fillStyle = "#ffffff";
				ctx.arc(leftx,250,R,(rot / 180)* Math.PI,(1+(rot/180))*Math.PI,true);
				ctx.fill();
				
				ctx.beginPath();
				ctx.fillStyle = "#000000";
				ctx.arc(leftx,250,R,(rot/180)*Math.PI,(1+(rot/180))*Math.PI,false);
				ctx.fill();
				
				var y = Math.sin(rot/180*Math.PI)*0.5*R;
				var x = Math.cos(rot/180*Math.PI)*0.5*R;
				
				ctx.beginPath();
				ctx.fillStyle = "#000000";
				ctx.arc(leftx+x, 250+y,0.5*R,0,2*Math.PI,false);
				ctx.fill();
				
				ctx.beginPath();
				ctx.fillStyle = "#ffffff";
				ctx.arc(leftx-x, 250-y,0.5*R,0,2*Math.PI,true);
				ctx.fill();
				
				ctx.beginPath();
				ctx.fillStyle = "#ffffff";
				ctx.arc(leftx+x, 250+y,0.1*R,0,2*Math.PI);
				ctx.fill();
				
				ctx.beginPath();
				ctx.fillStyle = "#000000";
				ctx.arc(leftx-x, 250-y,0.1*R,0,2*Math.PI);
				ctx.fill();
				
				rot = rot + xuanzhuanjd;
				leftx = leftx + huchang;
				if(leftx > 1200-huchang || leftx < 200){
					huchang = -huchang;
					xuanzhuanjd = -xuanzhuanjd;
				}
			},100);
			</script>
	</body>
</html>
